<template>
  <div class="header">
    <div class="logo">
      <img src="../assets/header/logo1.png" alt="" />
      <div class="logoText">
        <span>
          {{
            $route.path !== "/complain"
              ? "政企创新业务集约化"
              : "移网服务质量"
          }}
        </span>
        <span>
          {{
            $route.path !== "/complain"
              ? "Government and Enterprise Business"
              : "Mobile Network Service Quality"
          }}
        </span>
      </div>
    </div>
    <div class="switch" v-if="$route.path !== '/complain'">
      <div class="tabs" v-for="(val, index) in elmu" :key="index">
        <img :src="require('../assets/' + val.imgSrc)" />
        <router-link :to="val.toSrc" exact active-class="backColor"
          ><span>{{ val.nameVal }}</span></router-link
        >
      </div>
    </div>
    <div class="selectDate" v-if="$route.path == '/complain'">
      <!--      <el-select v-model="value.val" class="m-2" placeholder="请选择">-->
      <!--        <el-option-->
      <!--        v-for="item in seValue" 省-->
      <!--        :key="item.value"-->
      <!--        :label="item.label"-->
      <!--        :value="item.value"-->
      <!--        />-->
      <!--      </el-select>-->
      <el-date-picker
        v-model="dateVal.val"
        :default-value="dateVal"
        align="right"
        type="date"
        :editable="false"
        placeholder="选择日期"
        :picker-options="pickerOptions"
        value-format="YYYY-MM-DD 00:00:00"
        @change="selectDay"
        :clearable="false"
      >
      </el-date-picker>
    </div>
    <div class="timeWeather">
      <div class="weather">
        <div class="letTime">
          <span>{{ dayAllTime }}</span>
          <span>{{ hoursAllTime }}</span>
        </div>
        <div class="rightWeather">
          <div class="qing">{{ weatherObject.wea }}</div>
          <!-- <img src="../assets/header/icon-sun.png" alt="" /> -->
          <!-- <img :src="require('../assets/wheather/' + imgVal)" alt="" /> -->
          <img :src="require('../assets/wheather/' + imgVal)" alt="" />
          <div class="hum">{{ weatherObject.tem }}</div>
        </div>
      </div>
      <!--      <div class="signOut"></div>-->
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  watch,
  onMounted,
  onUpdated,
  onUnmounted,
  getCurrentInstance,
  onBeforeUnmount,
  reactive,
  nextTick,
} from "vue"; //vue函数周期
import { useStore } from "vuex";
import axios from "axios";
import { getStartToday,getStartYesterday } from "../utils/common";

const weatherObject = reactive({ tem: "" }, { wea: "" }); //天气数据对象

let timeNow = ref(new Date()); // 时间变量
let dayAllTime = ref(); // 年月日
let hoursAllTime = ref(); // 时分

let imgVal = ref("icon-qing.png"); //初始默认值晴天，天气变量

const imgList = reactive(
  //天气背景图片数组
  {
    qing: "icon-qing.png", //晴

    duoyun: "Slice 6.png", //多云

    yintian: "Slice 7.png", //阴

    xiaoyu: "Slice 8.png", //小雨

    zhongyu: "Slice 9.png", //中/大雨

    xiaoxue: "Slice 10.png", //小雪

    zhongxue: "Slice 11.png", //中雪

    daxue: "Slice 12.png", //大雪

    yujiaxue: "Slice 13.png", //雨夹雪

    binbaojiaxue: "Slice 14.png", //冰雹加雪

    shandian: "Slice 15.png", //闪电

    leizhengyu: "Slice 16.png", //雷阵雨

    binbao: "Slice 17.png", //冰雹

    binbaojiayu: "Slice 17.png", //冰雹加雨

    wu: "Slice 19.png", //雾
  }
);

const elmu = ref([
  {
    toSrc: "/home",
    imgSrc: "header/icon-guganyunchi.png",
    nameVal: "联通云",
  },
  {
    toSrc: "/idc",
    imgSrc: "header/icon-IDC.png",
    nameVal: "IDC资源",
  },
  {
    toSrc: "/fiveG",
    imgSrc: "header/icon-5g.png",
    nameVal: "5GtoB网络",
  },
  // {
  //   toSrc: "/complain",
  //   imgSrc: "header/icon-5g.png",
  //   nameVal: "全省投诉",
  // },
]);

const pickerOptions = {
  // disabledDate(time) {
  //   return time.getTime() > Date.now();
  // },
};
const yesterday = getStartYesterday()
const dateVal = ref({
  // val: "2022-05-30 00:00:00",
  val:yesterday,
});
const store = useStore();

// 改变日期的时候存 vuex
function selectDay(val) {
  if (!val) {
    this.dateVal.value.val = getStartToday;
  }
  store.commit("complain/saveComplainDate", val);
}
//处理时间格式
let functionTime = (timeNow) => {
  let year = timeNow.value.getFullYear(); //年
  let month = timeNow.value.getMonth() + 1; //月
  let day = timeNow.value.getDate(); //日
  let hour = timeNow.value.getHours(); //时
  let minute = timeNow.value.getMinutes(); //分钟
  let second = timeNow.value.getSeconds(); //秒
  if (month < 10) {
    month = "0" + month;
  }
  if (day < 10) {
    day = "0" + day;
  }
  if (hour < 10) {
    hour = "0" + hour;
  }
  if (minute < 10) {
    minute = "0" + minute;
  }
  if (second < 10) {
    second = "0" + second;
  }
  dayAllTime.value = year + "/" + "" + month + "/" + "" + day;
  hoursAllTime.value = hour + ":" + minute;
};

let dateTime = setInterval(() => {
  timeNow.value = new Date(); //调用重新赋值
  functionTime(timeNow); //调用
}, 1000);

//请求天气接口
const weatherDay = () => {
  axios
    .get("https://tianqiapi.com/free/day", {
      params: { appid: "27738894", appsecret: "VsRM240j", cityid: "101200101" },
    })
    .then((r) => {
      weatherObject.tem = r.data.tem + "℃";

      weatherObject.wea = r.data.wea;

      switch (r.data.wea) {
        case "晴":
          imgVal.value = imgList.qing;
          break;
        case "多云":
          imgVal.value = imgList.duoyun;
          break;
        case "阴":
          imgVal.value = imgList.yintian;
          break;
        case "小雨":
          imgVal.value = imgList.xiaoyu;
          break;
        case "中雨":
          imgVal.value = imgList.zhongyu;
          break;
        case "大雨":
          imgVal.value = imgList.zhongyu;
          break;
        case "小雪":
          imgVal.value = imgList.xiaoxue;
          break;
        case "中雪":
          imgVal.value = imgList.zhongxue;
          break;
        case "大雪":
          imgVal.value = imgList.daxue;
          break;
        case "雨夹雪":
          imgVal.value = imgList.yujiaxue;
          break;
        case "冰雹加雪":
          imgVal.value = imgList.binbaojiaxue;
          break;
        case "闪电":
          imgVal.value = imgList.shandian;
          break;
        case "雷阵雨":
          imgVal.value = imgList.leizhengyu;
          break;
        case "冰雹":
          imgVal.value = imgList.binbao;
          break;
        case "冰雹加雨":
          imgVal.value = imgList.binbaojiayu;
          break;
        case "雾":
          imgVal.value = imgList.wu;
          break;
      }
    })

    .catch((e) => {
      console.log("天气接口请求出错");
    });
};

onMounted(() => {
  weatherDay(); //调用请求天气接口

  // 日期
  // dateVal.value.val = getStartToday();
  // console.log(dateVal.value.val);
  selectDay(dateVal.value.val);
  store.commit("complain/saveComplainDate", dateVal.value.val);
});

onBeforeUnmount(() => {
  if (dateTime) {
    clearInterval(dateTime); // 在Vue实例销毁前，清除时间定时器
  }
});
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  width: 97%;
  height: 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #001c31;
  padding: 0 1.5%;

  .logo {
    width: 33%;
    height: 90%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;

    img {
      /*width: 68px;*/
      /*height: 50px;*/
      width: 70px;
      height: 70px;
    }

    .logoText {
      width: 84%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      span {
        font-size: 14px;
        display: inline-block;
        width: 100%;
        color: #d6e3ea;
      }

      span:first-child {
        font-size: 22px;
      }
    }
  }

  .switch {
    width: 35%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: #d6e3ea;
    font-size: 18px;
    // .router-link-active {
    //   color: #028CDA;
    //   text-decoration: none;
    // }
    .backColor {
      color: #028cda;
    }

    a {
      color: #d6e3ea;
      text-decoration: none;
    }

    img {
      width: 48px;
      height: 48px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-right: 10px;
    }

    span {
      width: 100%;
      text-align: center;
      cursor: pointer;
    }

    span:active {
      color: #028cda;
    }

    .tabs {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      /*justify-content: space-between;*/
    }
  }

  .selectDate {
    display: flex;
    justify-content: center;

    /deep/ .el-popper {
      background: #001c31 !important;
    }

    /deep/ .el-select {
      width: 220px;
    }

    /deep/ .el-select {
      background: transparent;
    }

    /deep/ .el-input__wrapper {
      border-radius: 0;
      --el-input-inner-height: none;
      background: url("../assets/iconBorder/Slice 15.png");
      background-repeat: no-repeat;
      box-shadow: none !important;
    }

    /deep/ .el-input__inner {
      text-align: center;
      font-size: 16px;
      --el-input-placeholder-text: 16px;
      --el-input-placeholder-color: #ffffff;
      --el-input-placeholder-width: 100px;
      color: #ffffff;
    }

    .el-select {
      .el-input__wrapper {
        &:hover {
          box-shadow: none !important;
        }
      }
    }
  }

  .timeWeather {
    width: 33%;
    height: 80%;

    display: flex;
    align-items: center;
    justify-content: center;

    .weather {
      width: 72%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #d6e3ea;
      font-size: 18px;

      .rightWeather {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 36%;
        font-size: 18px;

        img {
          width: 18px;
          height: 18px;
        }
      }

      .letTime {
        width: 60%;

        span:last-child {
          margin-left: 6%;
        }
      }
    }

    .signOut {
      cursor: pointer;
      color: #d6e3ea;
      width: 8%;
      height: 50%;
      background-image: url("../assets/header/Slice 14.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
<style lang="less">
.el-date-picker {
  --el-datepicker-off-text-color: #606266;
}

.el-popper,
.el-picker-panel__body {
  .el-date-picker__header {
    .el-picker-panel__icon-btn {
      color: #fff;
    }

    span {
      color: #fff;
    }
  }

  background: #001c31 !important;

  .available,
  --el-datepicker-off-text-color {
    color: #a8abb2;
  }

  .prev-month,
  .next-month {
    // color: #606266;
  }

  th {
    border-color: #185481;
  }
}
</style>
